import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import request from '../../../../utils/request';
import { FRIENDS_TODAYBEST, BASE_URI } from '../../../../utils/pathMap';
// import IconFont from '../../../../components/IconFont';
import { pxToDp } from '../../../../utils/stylesKits';
import IconFont from "../../../../components/IconFont";


class Index extends Component {
    state = {
        perfectGirl: {
            // "age": 20, "agediff": 0, "dist": 962.9, "fateValue": 80, "gender": "女", "header": "/upload/18665333333.jpg", "id": 83, "marry": "单身", "nick_name": "33333", "xueli": "大专"
        }
    }
    async componentDidMount() {
        const res = await request.privateGet(FRIENDS_TODAYBEST);
        // console.log(res);
        // this.setState({ perfectGirl: res.data[0] });
        this.setState({ perfectGirl: res.data[0] });
    }

    render() {
        const { perfectGirl } = this.state;
        // console.log(perfectGirl);

        return (
            <View style={{ flexDirection: 'row' }}>
                {/* 左边图片 */}
                <View style={{ position: 'relative' }} >
                    <Image
                        style={{ width: pxToDp(120), height: pxToDp(120), borderRadius: pxToDp(4) }}
                        source={{ uri: BASE_URI + perfectGirl.header }} />
                    <View style={{
                        width: pxToDp(80), height: pxToDp(30), backgroundColor: '#b564bf',
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderRadius: pxToDp(10),
                        position: 'absolute',
                        left: 0,
                        bottom: pxToDp(10)
                    }}>
                        <Text style={{ color: '#fff', fontSize: pxToDp(14) }}>今日佳人</Text>
                    </View>
                </View>

                {/* 右边内容 */}
                <View style={{ flex: 1, flexDirection: 'row' }}>
                    <View style={{ flex: 2, justifyContent: 'space-around', paddingLeft: pxToDp(10) }}>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ color: '#555' }}>{perfectGirl.nick_name}</Text>
                            <IconFont
                                style={{ fontSize: pxToDp(18), color: perfectGirl.gender === '男' ? '#b564bf' : 'red', marginLeft: pxToDp(7), marginRight: pxToDp(7) }}
                                name={perfectGirl.gender === '女' ? 'icontanhuanv' : 'icontanhuanan'} />
                            <Text style={{ color: '#555' }}>{perfectGirl.age}岁</Text>
                        </View>
                        <View style={{ flexDirection: 'row' }}>
                            <Text style={{ color: '#555' }}>{perfectGirl.marry}</Text>
                            <Text style={{ color: '#555', marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>|</Text>
                            <Text style={{ color: '#555' }}>{perfectGirl.xueli}</Text>
                            <Text style={{ color: '#555', marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>|</Text>
                            <Text style={{ color: '#555' }}>{perfectGirl.agediff < 10 ? "年龄相仿" : "有点代沟"}</Text>
                        </View>
                    </View>
                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                        <View style={{ position: 'relative', alignItems: 'center', justifyContent: 'center' }}>
                            <IconFont name="iconxihuan" style={{ fontSize: pxToDp(50), color: 'red' }} />
                            <Text style={{ position: 'absolute', color: '#fff', fontSize: pxToDp(13), fontWeight: 'bold' }}>{perfectGirl.fateValue}</Text>
                        </View>
                        <Text style={{ color: 'red', fontSize: pxToDp(13) }}>缘分值</Text>
                    </View>
                </View>
            </View>
        );
    }
}

export default Index;